<template>
  <div>
    <el-upload
      ref="upload"
      class="avatar-uploader"
      action="/server/uploadUtil/upload"
      :headers="header"
      :limit="limit"
      :disabled="disabled"
      name="upfile"
      :multiple="multiple"
      list-type="picture-card"
      :file-list="upLoadImg"
      :on-preview="handlePictureCardPreview"
      :before-remove="beforeRemove"
      :on-remove="handleRemove"
      :on-error="handleAvatarError"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-exceed="outLimit">
      <i class="el-icon-plus"></i>
    </el-upload>
    <div class="img-big-show flex-row-ver" v-if="dialogVisible" @click="dialogVisible = false">
      <img style="max-width: 100%;max-height: 100%;" :src="dialogImageUrl" @click.stop />
      <i class="close el-icon-close" @click="dialogVisible = false"></i>
    </div>
    
  </div>
</template>

<script>
  export default {
    name: 'igUpLoads',
    props: {
      upLoadImg: { // 回显数据，获取到的图片
        type: Array,
        default: ()=> []
      },
      size: {
        type: Number,
        default: 0.5
      },
      limit: {
        type: Number,
        default: 1
      },
      multiple: { // 回显上传的图片 不要用多选，
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        header: { //上传请求头
          token: JSON.parse(sessionStorage.getItem('loginMsg')).token,
          expire: JSON.parse(sessionStorage.getItem('loginMsg')).expire
        },
        dialogImageUrl: '', // 被点击查看的图片
        dialogVisible: false
      }
    },
    methods: {
      beforeRemove(file) { // 删除图片之前的钩子
        if (!file.size || (file.size && this.beforeAvatarUpload(file, true))) {
          return this.$confirm(`确定移除 ${ file.name }？`)
        } else {
          return true
        }
      },
      handleRemove(file) { // 动态删除图片
        if (file.response) { // 本地上传的图片
          this.$emit('deleteImage', `${file.response.data.key}`)
        } else { // 服务器获取的图片
          this.$emit('deleteImage', file.url.replace('http://image.jiaowawang.cn/', ''))
        }
      },
      handlePictureCardPreview(file) { // 查看大图
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      beforeAvatarUpload(file, showMsg) { //上传之前的验证
        //this.upimgloading = true
        const isImgType = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type == 'image/jpg')
        const limit = (file.size / 1024 / (this.size * 1024)) < 1
        if (!isImgType && !showMsg) {
          this.$message.error('上传图片只能是JPG/png/jpeg 格式!')
          // this.upimgloading = false
        }
        if (!limit && !showMsg) {
          this.$message.error(`上传图片大小不能超过 ${this.size}M!`)
          //this.upimgloading = false
        }
        return isImgType && limit
      },
      
      handleAvatarSuccess(response, file, fileList) { //上传成功
        this.$emit('getUploadList',{name: file.name, url:`${response.data.key}`})
      },
      clearFiles() { // 清除上传列表
        this.$refs.upload.clearFiles()
      },
      handleAvatarError(response, file, fileList) { // 上传失败
        this.$message.error('上传图片失败，请重试')
        //this.upimgloading = false
      },
      outLimit(files, fileList) { // 超出限制数量
        if (this.multiple) {
          this.$message.error(`一次最多选${this.limit}张`)
        } else {
          this.$message.error(`一次最多只能上传${this.limit}张`)
        }
      }
    },
    method() {
    
    }
  }
</script>

<style lang="scss" scoped>
  .img-big-show{
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0, .5);
    padding: 40px;
    box-sizing: border-box;
    .close{
      position: absolute;
      right: 40px;
      top: 40px;
      color: #fff;
      font-size: 48px;
      z-index: 999;
    }
  }
  .avatar-uploader{
    /deep/ .el-upload-list{
      display: inline-flex;
      .el-upload-list__item{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        img{
          max-width: 100%;
          max-height: 100%;
          width: auto !important;
          height: auto !important;
        }
      }
    }
    
  }
</style>
